import React, {useState} from "react";
import {Row, Col} from "antd";
import styled from "@emotion/styled";

interface CategoryItem {
    title: string;
    isActive: boolean;
}

export const TagsPage = () => {

    const [category, setCategory] = useState<CategoryItem[]>([
        {title: '图片', isActive: true},
        {title: '文档', isActive: false},
        {title: '视频', isActive: false},
    ])

    return <Container>
        <Row className="category-area">
            <Col className="category-title" span={1}>分类：</Col>
            <Col className="category-content" span={23}>
                {category.map((item, index) =>
                    <span
                        className={["category-item", item.isActive ? "category-active" : ""].join(" ")}
                        key={index}
                    >{item.title}
                    </span>)
                }
            </Col>
        </Row>
        <Row className="tag-area">
            <Col className="tag-title" span={1}>标签：</Col>
            <Col className="tag-content" span={23}>

            </Col>
        </Row>
    </Container>
}

const Container = styled.div`
  .category-area {
    line-height: 30px;
    .category-title {
      line-height: 30px;
    }
    .category-content {
      line-height: 18px;
      .category-item {
        cursor: pointer;
        font-size: 10px;
        display: inline-block;
        padding: 3px 10px;
        border-radius: 9px;
        margin: 3px 8px;
      }
      .category-active {
        color: #f5222d;
        background-color: #fff1f0;
      }
    }
  }
  .tag-area {
    margin-top: 10px;
  }
`